<template>
	<div id="building-container">
		<!-- 搜索框部分 -->
		<div id="search">
			<el-form :inline="true" :model="searchData" id="search_form">
				<el-form-item label="建筑名">
					<el-input placeholder="请输入建筑名" v-model="searchData.searchName" clearable />
				</el-form-item>
				<el-form-item label="种类">
					<el-select v-model="searchData.type" clearable>
						<el-option v-for="t of typeList" :key="t.id" :label="t.name" :value="t.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="$refs.table.handleSearch()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleCreate">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- END搜索框部分 -->
		<!-- 物品添加/修改对话框 -->
		<el-dialog :title="selBuild.id == undefined ? '创建物品' : '修改物品'" :visible="active" width="50%"
			:before-close="handleClose">
			<el-form :model="selBuild" label-width="80px">
				<el-form-item label="建筑名称">
					<el-input v-model="selBuild.name"></el-input>
				</el-form-item>
				<el-form-item label="建筑描述">
					<el-input v-model="selBuild.description" type="textarea" rows="4"></el-input>
				</el-form-item>
				<el-form-item label="建筑种类">
					<el-select v-model="selBuild.type" style="width: 100%;">
						<el-option v-for="t of typeList" :key="t.id" :value="t.id" :label="t.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="建筑能耗">
					<el-input v-model="selBuild.power"></el-input>
				</el-form-item>
				<el-form-item label="建筑原料">
					<item-list-panel :initialProducts="selBuild.costs" :initialItems="costList"
						@update="handleRenewItems"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="handleSave"> 确定 </el-button>
				<el-button @click="handleClose">取 消</el-button>
			</div>
		</el-dialog>
		<!-- END物品添加/修改对话框 -->
		<!-- 物品列表显示部分 -->
		<pagination-table searchUrl="/build/list" :searchData="searchData" id="table" :operate-width="240"
			ref="table" has-index>
			<el-table-column prop="name" label="建筑名" width="120" />
			<el-table-column prop="type" label="建筑种类" width="120" />
			<el-table-column prop="power" label="能耗" width="120" />
			<el-table-column prop="iconUrl" label="图片" width="120">
				<template slot-scope="scope">
					<simple-build-show :name="scope.row.name" :iconUrl="scope.row.iconUrl" />
				</template>
			</el-table-column>
			<el-table-column prop="iconUrl" label="建筑消耗" width="300">
				<template slot-scope="scope">
					<simple-item-show v-for="(p, index) of scope.row.costs" :key="index" :item="p" />
				</template>
			</el-table-column>
			<el-table-column prop="description" label="描述" width="400" />
			<template v-slot:operate="scope">
				<el-button type="primary" size="mini" @click="handleMotify(scope.row.id)">修改</el-button>
				<el-button type="primary" size="mini" @click="handleOpenImage(scope.row)">配置图片</el-button>
				<el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
			</template>
		</pagination-table>
		<!-- END物品列表显示部分 -->
		<!-- 图片配置弹窗 -->
		<image-dialog v-model="imageActive" type="buildings" :icon="selIcon"></image-dialog>
		<!-- END图片配置弹窗 -->
	</div>
</template>

<script>
	import ItemListPanel from '@/components/ItemPicker/ItemListPanel.vue';
	import ImageDialog from "@/components/Dialog/ImageDialog.vue";
	import PaginationTable from '@/components/PaginationTable.vue';
	import SimpleBuildShow from "../components/SimpleBuildShow";
	import SimpleItemShow from "../components/SimpleItemShow";
	export default {
		components: {
			ItemListPanel,
			PaginationTable,
			SimpleBuildShow,
			SimpleItemShow,
			ImageDialog
		},
		name: "BuildingPage",
		data() {
			return {
				costList: [], //关于建筑花费使用排序的物品列表
				typeList: [], //建筑种类列表
				type: false, // 创建物品还是修改物品
				active: false, // 是否显示弹窗
				imageActive: false, //图片配置弹窗是否可见
				selBuild: {}, // 选择建筑物
				selIcon: null,
				searchData: {
					search_name: null,
					type: null,
				},
			};
		},
		methods: {
			Build(uri) {
				return this.$img.b_128(uri);
			},
			init() {
				this.$api.get("/build/init", this.searchData).then((res) => {
					this.costList = res.data.costs;
					this.typeList = res.data.types;
				});
			},
			handleCreate() {
				this.selBuild = {
					costs: [],
				};
				this.type = true;
				this.active = true;
			},
			handleMotify(id) {
				this.$api.get("/build/info/" + id).then((res) => {
					this.selBuild = res.data.building;
					this.$set(this.selBuild, 'costs', res.data.building.costs);
					this.type = false;
					this.active = true;
				});
			},
			handleSearch() {
				this.$refs.table.handleSearch();
			},
			handleOpenImage(row) {
				this.selIcon = row.iconUrl;
				this.imageActive = true;
			},
			handleClose() {
				this.active = false;
			},
			handleDelete(id) {
				this.$confirm("此操作将永久删除该建筑, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						this.$api.post("/build/remove/" + id).then((res) => {
							this.$message({
								type: res.code == 0 ? "success" : "error",
								message: res.message,
							});
							this.init();
							this.handleSearch();
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			handleSave() {
				var url = this.type ? "/build/insert" : "/build/update";
				this.$api.postJson(url, this.selBuild).then((res) => {
					this.$message({
						message: res.message,
						type: res.code == 0 ? "success" : "error",
					});
					this.init();
					this.$refs.table.handleInnerSearch();
					this.handleClose();
				});
			},
			handleRenewItems(items) {
				// console.log("保存物品", "保存前", this.selBuild.costs);
				this.selBuild.costs = items;
				console.log("保存后", this.selBuild.costs);
			},
		},
		created() {
			var _this = this;
			this.$version.addListener("build", function() {
				_this.init();
				_this.handleSearch();
			});
			this.init();
			document.addEventListener("keydown", (e) => {
				if (e.keyCode == 13) {
					if (this.active) this.handleSave();
					else if (this.imageActive) console.log("图片保存");
					else this.handleSearch();
				}
			});
		},
		destroyed() {
			this.$version.removeListener("build");
			document.removeEventListener("keydown");
		},
	};
</script>

<style lang="less" scoped>
	#building-container {
		overflow: auto;
		height: 100%;
	}

	.add_show {
		position: absolute;
		top: 100px;
		left: 10px;
		z-index: 10;
	}

	#search {
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		height: 60px;
		box-sizing: border-box;
		width: 100%;
		text-align: right;
		// 保证搜索框向右对齐

		#search_form {
			/deep/ .el-form-item {
				margin-bottom: 0;
			}
		}
	}

	#table {
		width: 90%;
		margin: auto;
		margin-top: 15px;
		height: calc(100vh - 180px);
	}

	.btn_group {
		margin-top: 10px;
	}
</style>